<template>
  <ToolTemplate
    title="WebSocket 测试工具"
    description="测试 WebSocket 连接，发送和接收消息"
  >
    <div class="websocket-tool">
      <div class="ws-container">
        <!-- 左侧面板：接收消息 -->
        <div class="panel received-panel">
          <div class="panel-header">
            <h3>接收消息</h3>
            <div class="status" :class="{ connected: isConnected }">
              {{ isConnected ? '已连接' : '未连接' }}
            </div>
          </div>
          <div class="messages">
            <div 
              v-for="(msg, index) in receivedMessages" 
              :key="index"
              class="message received"
            >
              <span class="time">{{ msg.time }}</span>
              <span class="content">{{ msg.content }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧面板：发送消息 -->
        <div class="panel send-panel">
          <div class="panel-header">
            <h3>发送消息</h3>
            <button 
              @click="toggleConnection" 
              :class="{ connected: isConnected }"
            >
              {{ isConnected ? '断开' : '连接' }}
            </button>
          </div>
          <div class="connection-config" v-if="!isConnected">
            <input 
              type="text" 
              v-model="wsUrl" 
              placeholder="输入 WebSocket URL..."
            >
          </div>
          <div class="messages">
            <div 
              v-for="(msg, index) in sentMessages" 
              :key="index"
              class="message sent"
            >
              <span class="content">{{ msg.content }}</span>
              <span class="time">{{ msg.time }}</span>
            </div>
          </div>
          <div class="input-group">
            <input 
              type="text" 
              v-model="messageInput"
              placeholder="输入要发送的消息..."
              @keyup.enter="sendMessage"
              :disabled="!isConnected"
            >
            <button 
              @click="sendMessage"
              :disabled="!isConnected"
            >
              发送
            </button>
          </div>
        </div>
      </div>
    </div>
  </ToolTemplate>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ToolTemplate from './ToolTemplate.vue'

interface Message {
  content: string
  type: 'sent' | 'received'
  time: string
}

const wsUrl = ref('ws://localhost:8080')
const isConnected = ref(false)
const messageInput = ref('')
const messages = ref<Message[]>([])
let ws: WebSocket | null = null

const sentMessages = computed(() => 
  messages.value.filter(msg => msg.type === 'sent')
)

const receivedMessages = computed(() => 
  messages.value.filter(msg => msg.type === 'received')
)

const formatTime = () => {
  const now = new Date()
  return now.toLocaleTimeString()
}

const toggleConnection = () => {
  if (isConnected.value) {
    ws?.close()
    isConnected.value = false
  } else {
    try {
      ws = new WebSocket(wsUrl.value)
      
      ws.onopen = () => {
        isConnected.value = true
        messages.value.push({
          content: '连接成功',
          type: 'received',
          time: formatTime()
        })
      }

      ws.onmessage = (event) => {
        messages.value.push({
          content: event.data,
          type: 'received',
          time: formatTime()
        })
      }

      ws.onclose = () => {
        isConnected.value = false
        messages.value.push({
          content: '连接已关闭',
          type: 'received',
          time: formatTime()
        })
      }

      ws.onerror = () => {
        messages.value.push({
          content: '连接错误',
          type: 'received',
          time: formatTime()
        })
      }
    } catch (error) {
      messages.value.push({
        content: '连接失败',
        type: 'received',
        time: formatTime()
      })
    }
  }
}

const sendMessage = () => {
  if (!messageInput.value.trim() || !ws || !isConnected.value) return

  ws.send(messageInput.value)
  messages.value.push({
    content: messageInput.value,
    type: 'sent',
    time: formatTime()
  })
  messageInput.value = ''
}
</script>

<style scoped lang="scss">
.websocket-tool {
  .ws-container {
    display: flex;
    gap: 20px;
    height: 600px;

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      
      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: white;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 8px 8px 0 0;

        h3 {
          margin: 0;
          color: var(--text-color);
        }

        .status {
          padding: 4px 12px;
          border-radius: 20px;
          background: #fee2e2;
          color: #dc2626;
          font-size: 14px;

          &.connected {
            background: #dcfce7;
            color: #16a34a;
          }
        }

        button {
          padding: 6px 16px;
          border: none;
          background: var(--primary-color);
          color: white;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: var(--hover-color);
          }

          &.connected {
            background: #dc2626;

            &:hover {
              background: #b91c1c;
            }
          }
        }
      }

      .connection-config {
        padding: 15px;
        background: white;
        border-bottom: 1px solid #e2e8f0;

        input {
          width: 100%;
          padding: 8px 12px;
          border: 1px solid #e2e8f0;
          border-radius: 6px;
          font-size: 14px;

          &:focus {
            outline: none;
            border-color: var(--primary-color);
          }
        }
      }

      .messages {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .message {
          padding: 8px 12px;
          border-radius: 6px;
          font-size: 14px;
          display: flex;
          gap: 8px;
          align-items: center;

          .time {
            color: #666;
            font-size: 12px;
          }

          &.sent {
            background: #dbeafe;
            margin-left: auto;
            
            .time {
              order: 2;
            }
          }

          &.received {
            background: #f3f4f6;
          }
        }
      }

      .input-group {
        padding: 15px;
        display: flex;
        gap: 10px;
        background: white;
        border-top: 1px solid #e2e8f0;
        border-radius: 0 0 8px 8px;

        input {
          flex: 1;
          padding: 8px 12px;
          border: 1px solid #e2e8f0;
          border-radius: 6px;
          font-size: 14px;

          &:focus {
            outline: none;
            border-color: var(--primary-color);
          }

          &:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
          }
        }

        button {
          padding: 8px 16px;
          border: none;
          background: var(--primary-color);
          color: white;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover:not(:disabled) {
            background: var(--hover-color);
          }

          &:disabled {
            background: #9ca3af;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style> 